<template>
  <div class="form">
    <el-dialog
      width="65%"
      :visible.sync="dialogFormVisible"
      title="充值记录"
      @close="cancel"
    >
      <search
        :searchProps="searchProps"
        @change="searchChange"
        @search="getRecharge"
      ></search>
      <el-table
        :data="tableList"
        border
        style="margin: 10px 0"
        v-loading="loading"
      >
        <el-table-column
          prop="order_id"
          label="充值订单号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="money"
          label="充值金额(￥)"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="pay_state"
          label="支付状态"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.pay_state == 1 ? "未支付" : "已支付" }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pay_state"
          label="支付方式"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.pay_method == 1 ? "微信支付" : "支付宝" }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pay_time"
          label="支付时间"
          width="180"
          align="center"
        >
        </el-table-column>
      </el-table>
      <pagination
        :page="params.page"
        :page_size="params.page_size"
        :total="total"
        @currentChange="currentChange"
        @sizeChange="sizeChange"
      ></pagination>
    </el-dialog>
  </div>
</template>

<script>
import searchProps from "../form/search/searchProps.js"
import { recharge } from "@/api/account"
export default {
  name: "my-form",
  data() {
    return {
      dialogFormVisible: false,
      loading: true,
      params: {
        page: 1,
        page_size: 10,
        business_code: "",
        pay_state: "",
        pay_method: "",
        spread_id: "",
      },
      total: 0,
      tableList: [],
      searchProps: searchProps,
    }
  },
  methods: {
    show(e) {
      const { spread_id } = e
      this.params.spread_id = spread_id
      this.getRecharge()
    },
    async getRecharge() {
      try {
        const { data } = await recharge(this.params)
        this.loading = false
        this.tableList = data.data
        this.total = data.total
        this.dialogFormVisible = true
      } catch (ex) {
        this.loading = false
        this.$msg.errorMsg(ex.msg)
      }
    },
    // 取消
    cancel() {
      this.dialogFormVisible = false
    },
    // 分页
    sizeChange(e) {
      this.params.page_size = e
      this.getRecharge()
    },
    currentChange(e) {
      this.params.page = e
      this.getRecharge()
    },
    // 搜素
    searchChange(e) {
      console.log(e, "搜索")
      const { pay_method, pay_state } = e
      this.params = {
        ...this.params, // 保留已有属性
        pay_method,
        pay_state,
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>
